<template>
    <div class="content">
        <u-sticky bgColor="#fff">
            <tab-list :list="list" :activeIndex="activeIndex" @change="onTabChange" />
        </u-sticky>
        <div class="card-list">
            <div class="card-item" v-for="item in cardList" :key="item.id">
                <card-item
                    :type="activeIndex === 0 ? 'buy' : 'settle'"
                    :item="item"
                    :studyhallId="id"
                />
            </div>
        </div>
        <div class="empty" v-if="isFinish && cardList.length === 0">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无记录</p>
        </div>
    </div>
</template>

<script>
import CardItem from '@/components/CardItem';
import TabList from '@/components/TabList';
export default {
    name: 'list',
    components: {
        CardItem,
        TabList,
    },
    data() {
        return {
            id: null,
            activeIndex: 0,
            list: [{ name: '全部' }, { name: '我的' }],
            cardList: [],
            isFinish: false,
        };
    },
    onLoad(options) {
        if (options.id) {
            this.id = Number(options.id);
            this.getCardListAll();
        }
    },
    methods: {
        onTabChange(index) {
            this.isFinish = false;
            this.cardList = [];
            this.activeIndex = index;
            if (index === 1) {
                this.getCardListHistory();
            } else {
                this.getCardListAll();
            }
        },
        getCardListAll() {
            this.$Api.study.card
                .list({
                    studyhallId: this.id,
                    queryType: 0,
                })
                .then(res => {
                    this.cardList = res;
                    this.isFinish = true;
                });
        },
        getCardListHistory() {
            this.$Api.member.card
                .list({
                    studyhallId: this.id,
                    queryType: 1,
                })
                .then(res => {
                    this.cardList = res;
                    this.isFinish = true;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .tab-list {
        background: #fff;
    }
    .card-list {
        padding: 20rpx 30rpx;
        .card-item {
            margin-bottom: 20rpx;
        }
    }
}
</style>
